﻿@model RealEstateApp.WebUI.Models.CustomerModel
@Html.ValidationSummary(true)

@{
    ViewBag.Title = "Thông tin nhân viên";
}

<div class="page-content">
    <div class="page-header position-relative">
        <h1>Nhân viên: @Html.DisplayFor(model => model.Name)
        </h1>
    </div>
    <!--/.page-header-->

    <div class="row-fluid">
        <div class="span12">
            <!--PAGE CONTENT BEGINS-->

            <div class="row-fluid">
                <div class="span12 widget-container-span">
                    <div class="widget-box">
                        <div class="widget-header">
                            <div class="widget-toolbar no-border">
                                <ul class="nav nav-tabs" id="myTab">
                                    <li class="active">
                                        <a data-toggle="tab" href="#home">Thông tin chung</a>
                                    </li>

                                    <li>
                                        <a data-toggle="tab" href="#tasks">Lịch sử giao dịch</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main padding-6">
                                <div class="tab-content">
                                    <div id="home" class="tab-pane in active">
                                        @using (Html.BeginForm(null, null, FormMethod.Post, new { @class = "form-horizontal" }))
                                        {
                                            @Html.HiddenFor(model => model.CustomerId)
                                            <fieldset>
                                                <div class="control-group">
                                                    <div class="control-label">
                                                       <label for="Name">Họ và tên</label>
                                                    </div>
                                                    <div class="controls">
                                                        @Html.EditorFor(model => model.Name)
                                                        @Html.ValidationMessageFor(model => model.Name)
                                                    </div>
                                                </div>

                                                <div class="control-group">
                                                    <div class="control-label">
                                                        @Html.LabelFor(model => model.BirthDate)
                                                    </div>
                                                    <div class="controls">
                                                        @Html.EditorFor(model => model.BirthDate)
                                                        @Html.ValidationMessageFor(model => model.BirthDate)
                                                    </div>
                                                </div>

                                                @*<div class="editor-label">
                        @Html.LabelFor(model => model.SalesFID)
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.SalesFID)
                        @Html.ValidationMessageFor(model => model.SalesFID)
                    </div>*@

                                                <div class="control-group">
                                                    <div class="control-label">
                                                        @Html.LabelFor(model => model.Phone)
                                                    </div>
                                                    <div class="controls">
                                                        @Html.EditorFor(model => model.Phone)
                                                        @Html.ValidationMessageFor(model => model.Phone)
                                                    </div>
                                                </div>

                                                <div class="control-group">
                                                    <div class="control-label">
                                                        @Html.LabelFor(model => model.Mobile)
                                                    </div>
                                                    <div class="controls">
                                                        @Html.EditorFor(model => model.Mobile)
                                                        @Html.ValidationMessageFor(model => model.Mobile)
                                                    </div>
                                                </div>


                                                <div class="control-group">
                                                    <div class="control-label">
                                                        @Html.LabelFor(model => model.Email)
                                                    </div>
                                                    <div class="controls">
                                                        @Html.EditorFor(model => model.Email)
                                                        @Html.ValidationMessageFor(model => model.Email)
                                                    </div>
                                                </div>

                                                <div class="control-group">
                                                    <div class="control-label">
                                                        <label for="Name">Địa chỉ thường trú</label>
                                                    </div>
                                                    <div class="controls">
                                                        @Html.EditorFor(model => model.Address)
                                                        @Html.ValidationMessageFor(model => model.Address)
                                                    </div>
                                                </div>

                                                <div class="form-actions">
                                                    <button class="btn btn-info" type="submit">
                                                        <i class="icon-ok bigger-110"></i>
                                                        Lưu lại
                                                    </button>
                                                </div>


                                            </fieldset>
                                        }
                                    </div>

                                   
                                    <div id="tasks" class="tab-pane">
                                        @Html.Partial("_ListTask", Model)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@section Top{
    <link href="@Url.Content("~/css/fullcalendar.css")" rel="stylesheet">
}

@section Bottom{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/js/fullcalendar.min.js")" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#tasks').on('click', '.dp-choose-date', function (event) {
                $(this).parent().find('.date-pick').datepicker('show');
            });

            $('#tasks').on('mousemove', '.dp-choose-time', function (event) {
                $(this).parent().find('.time-pick').timepicker({
                    minuteStep: 1,
                    showSeconds: false,
                    showMeridian: true
                });
            });

            $('#tasks').on('click', '.calvwz', function (event) {
                $(".tabvwz").removeClass("btn-primary");
                $(".calvwz").addClass("btn-primary");
                $(".task-table").hide();
                $(".task-calendar").show();
                initCalendar();
            });

            $('#tasks').on('click', '.tabvwz', function (event) {
                $(".calvwz").removeClass("btn-primary");
                $(".tabvwz").addClass("btn-primary");
                $(".task-calendar").hide();
                $(".task-table").show();
            });
        });

        function initCalendar() {
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            var calendar = $('#calendar').fullCalendar({
                buttonText: {
                    prev: '<i class="icon-chevron-left"></i>',
                    next: '<i class="icon-chevron-right"></i>'
                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1),
                    className: 'label-important'
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d - 5),
                    end: new Date(y, m, d - 2),
                    className: 'label-success'
                },
                {
                    title: 'Some Event',
                    start: new Date(y, m, d - 3, 16, 0),
                    allDay: false
                }]
            ,
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar !!!
                drop: function (date, allDay) { // this function is called when something is dropped
                    // retrieve the dropped element's stored Event Object
                    var originalEventObject = $(this).data('eventObject');
                    var $extraEventClass = $(this).attr('data-class');
                    // we need to copy it, so that multiple events don't have a reference to the same object
                    var copiedEventObject = $.extend({}, originalEventObject);
                    // assign it the date that was reported
                    copiedEventObject.start = date;
                    copiedEventObject.allDay = allDay;
                    if ($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
                    // render the event on the calendar
                    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                    $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
                    // is the "remove after drop" checkbox checked?
                    if ($('#drop-remove').is(':checked')) {
                        // if so, remove the element from the "Draggable Events" list
                        $(this).remove();
                    }
                }
            ,
                selectable: true,
                selectHelper: true,
                select: function (start, end, allDay) {
                    bootbox.prompt("New Event Title:", function (title) {
                        if (title !== null) {
                            calendar.fullCalendar('renderEvent',
                            {
                                title: title,
                                start: start,
                                end: end,
                                allDay: allDay
                            },
                            true // make the event "stick"
                            );
                        }
                    });
                    calendar.fullCalendar('unselect');
                }
            ,
                eventClick: function (calEvent, jsEvent, view) {
                    var form = $("<form class='form-inline'><label>Change event name &nbsp;</label></form>");
                    form.append("<input autocomplete=off type=text value='" + calEvent.title + "' /> ");
                    form.append("<button type='submit' class='btn btn-small btn-success'><i class='icon-ok'></i> Save</button>");
                    var div = bootbox.dialog(form,
                    [
                    {
                        "label": "<i class='icon-trash'></i> Delete Event",
                        "class": "btn-small btn-danger",
                        "callback": function () {
                            calendar.fullCalendar('removeEvents', function (ev) {
                                return (ev._id == calEvent._id);
                            })
                        }
                    }
                    ,
                    {
                        "label": "<i class='icon-remove'></i> Close",
                        "class": "btn-small"
                    }
                    ]
                    ,
                    {
                        // prompts need a few extra options
                        "onEscape": function () { div.modal("hide"); }
                    }
                    );
                    form.on('submit', function () {
                        calEvent.title = form.find("input[type=text]").val();
                        calendar.fullCalendar('updateEvent', calEvent);
                        div.modal("hide");
                        return false;
                    });
                    //console.log(calEvent.id);
                    //console.log(jsEvent);
                    //console.log(view);
                    // change the border color just for fun
                    //$(this).css('border-color', 'red');
                }
            });
        }
    </script>
}